// 引入 createApp 函数，用于创建一个 Vue 应用实例
import { createApp } from 'vue';
// 引入自定义的 Vue 组件 MaplibPopup
import MaplibPopup from './MaplibPopup.vue';
// 引入第三方库 mitt，用于创建自定义事件
import mitt from 'mitt';

// 定义函数 geomFirst，用于从 GeoJSON 对象中获取第一个 Feature 对象
export function geomFirst(obj) {
  if (obj && obj.features && obj.features.length > 0) {
    return obj.features[0];
  }

  return null;
}
// 定义异步函数 tableData，用于从 Feature 对象的属性中获取数据
export async function tableData(obj, infoApi) {
  const gf = geomFirst(obj);
  if (gf) {
    if (gf.properties) {
      return await infoApi(gf.properties);
    }
  }

  return {};
}
// 定义异步函数 createPopUp，用于创建弹出窗口，调用了函数 createPopUpEx
export async function createPopUp(
  features, // Feature 对象
  tableSchema, // 弹出窗口的表格配置项
  clickPopUpOk, // 点击弹出窗口确认按钮时的回调函数
  infoApi, // 获取弹出窗口数据的 API
  clickButtonOk, // 点击弹出窗口按钮时的回调函数
  clickButtonDel, // 点击弹出窗口按钮时的回调函数
  clickButtonAdd,
  otherProps = {}, // 其它的 Vue 组件属性
) {
  // 调用函数 createPopUpEx
  return createPopUpEx(
    features,
    tableSchema,
    clickPopUpOk,
    infoApi,
    clickButtonOk,
    clickButtonDel,
    clickButtonAdd,
    null,
    null,
    null,
    otherProps,
  );
}
// 定义异步函数 createPopUpEx，用于创建弹出窗口
export async function createPopUpEx(
  features, // Feature 对象
  tableSchema, // 弹出窗口的表格配置项
  clickPopUpOk, // 点击弹出窗口确认按钮时的回调函数
  infoApi, // 获取弹出窗口数据的 API
  clickButtonOk, // 点击弹出窗口按钮时的回调函数
  clickButtonDel,
  clickButtonAdd,
  clickButtonFire, // 点击弹出窗口火灾按钮时的回调函数
  clickButtonPolice, // 点击弹出窗口警察按钮时的回调函数
  clickButtonZhujian, // 点击弹出窗口主键按钮时的回调函数
  otherProps = {}, // 其它的 Vue 组件属性
) {
  // 调用函数 tableData，获取数据
  const obj = await tableData(features, infoApi);
  // 创建 Vue 应用实例
  const theApp = createApp(MaplibPopup, {
    obj: obj,
    tableSchema: tableSchema,
    ...otherProps,
  });
  // 创建一个 DOM 元素
  const node = document.createElement('div', {});
  // 创建一个 mitt 实例，用于创建自定义事件
  const emitter = mitt();
  // 监听 clickok 事件，执行回调函数 clickPopUpOk
  emitter.on('clickok', clickPopUpOk);
  // 如果传入了 clickButtonOk 参数
  if (clickButtonOk) {
    emitter.on('clickbutton', clickButtonOk); // 注册一个 clickbutton 事件监听器，用于监听点击按钮的事件
  }
  if (clickButtonDel) {
    emitter.on('clickButtonDel', clickButtonDel);
  }
  if (clickButtonAdd) {
    emitter.on('clickButtonAdd', clickButtonAdd);
  }
  // 如果传入了 clickButtonFire 参数
  if (clickButtonFire) {
    emitter.on('clickbuttonfire', clickButtonFire); // 注册一个 clickbuttonfire 事件监听器，用于监听点击消防按钮的事件
  }
  // 如果传入了 clickButtonPolice 参数
  if (clickButtonPolice) {
    emitter.on('clickbuttonpolice', clickButtonPolice); // 注册一个 clickbuttonpolice 事件监听器，用于监听点击消防按钮的事件
  }
  // 如果传入了 clickButtonZhujian 参数
  if (clickButtonZhujian) {
    emitter.on('clickbuttonzhujian', clickButtonZhujian); // 注册一个 clickbuttonzhujian 事件监听器，用于监听点击消防按钮的事件
  }
  // 将事件触发器提供给弹出框组件
  theApp.provide('theMitt', emitter);
  // 将弹出框组件挂载到节点上，并获取组件实例
  const inst = theApp.mount(node);
  // 返回弹出框组件的根元素节点
  return inst.$el;
}
